<template>
  <!-- 精选题库组件============================================================ -->
  <div>
    <el-card class="box-card">
      <!-- 导入级联选择器组件 -->
      <basics-come></basics-come>
      <!-- /导入级联选择器组件 -->

      <br />
      <el-alert :title="`数据一共${total}条`" type="info" show-icon> </el-alert>
      <br />
      <el-tabs v-model="activeName" type="card" @tab-click="TabClick">
        <!-- 全部列表-------------- -->
        <el-tab-pane label="全部" name="first">
          <el-table :data="choseList" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="180">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="180">
            </el-table-column>
            <el-table-column prop="catalog" label="目录"> </el-table-column>
            <el-table-column label="题型">
              <template slot-scope="scope">
                <div v-if="scope.row.questionType === '1'">单选</div>
                <div v-else-if="scope.row.questionType === '2'">多选</div>
                <div v-else>简答</div>
              </template>
            </el-table-column>
            <el-table-column label="题干">
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>

            <el-table-column label="录入时间">
              <template slot-scope="scope">
                <div>{{ scope.row.addDate | relativeTime }}</div>
              </template>
            </el-table-column>
            <el-table-column label="难度">
              <template slot-scope="scope">
                <div v-if="scope.row.difficulty === '1'">简单</div>
                <div v-else-if="scope.row.difficulty === '2'">一般</div>
                <div v-else>困难</div>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人"> </el-table-column>
            <el-table-column label="审核状态">
              <template slot-scope="scope">
                <div v-if="scope.row.chkState === 0">待审核</div>
                <div v-else-if="scope.row.chkState === 1">通过</div>
                <div v-else>拒绝</div>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  @click="YUlanmClick(scope.row)"
                  type="text"
                  size="small"
                >
                  预览
                </el-button>
                <el-button
                  v-if="scope.row.chkState === 0"
                  type="text"
                  size="small"
                  @click="ShenHe(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="small" :disabled="true" v-else
                  >审核</el-button
                >
                <el-button type="text" size="small" @click="Xiugai(scope.row)"
                  >修改</el-button
                >

                <el-button
                  type="text"
                  size="small"
                  @click="Shnagjia(scope.row)"
                  v-if="scope.row.publishState === 1"
                  >上架</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="Xiajia(scope.row)"
                  v-else
                  >下架</el-button
                >
                <el-button type="text" size="small" @click="Shanchu(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 待审核列表 -->
        <el-tab-pane label="待审核" name="second">
          <el-table :data="choseList" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="180">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="180">
            </el-table-column>
            <el-table-column prop="catalog" label="目录"> </el-table-column>
            <el-table-column label="题型">
              <template slot-scope="scope">
                <div v-if="scope.row.questionType === '1'">单选</div>
                <div v-else-if="scope.row.questionType === '2'">多选</div>
                <div v-else>简答</div>
              </template>
            </el-table-column>
            <el-table-column label="题干">
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>

            <el-table-column label="录入时间">
              <template slot-scope="scope">
                <div>{{ scope.row.addDate | relativeTime }}</div>
              </template>
            </el-table-column>
            <el-table-column label="难度">
              <template slot-scope="scope">
                <div v-if="scope.row.difficulty === '1'">简单</div>
                <div v-else-if="scope.row.difficulty === '2'">一般</div>
                <div v-else>困难</div>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人"> </el-table-column>
            <el-table-column label="审核状态">
              <template slot-scope="scope">
                <div v-if="scope.row.chkState === 0">待审核</div>
                <div v-else-if="scope.row.chkState === 1">通过</div>
                <div v-else>拒绝</div>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  @click="YUlanmClick(scope.row)"
                  type="text"
                  size="small"
                >
                  预览
                </el-button>
                <el-button
                  v-if="scope.row.chkState === 0"
                  type="text"
                  size="small"
                  @click="ShenHe(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="small" :disabled="true" v-else
                  >审核</el-button
                >
                <el-button type="text" size="small" @click="Xiugai(scope.row)"
                  >修改</el-button
                >

                <el-button
                  type="text"
                  size="small"
                  @click="Shnagjia(scope.row)"
                  v-if="scope.row.publishState === 1"
                  >上架</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="Xiajia(scope.row)"
                  v-else
                  >下架</el-button
                >
                <el-button type="text" size="small" @click="Shanchu(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table></el-tab-pane
        >
        <el-tab-pane label="已审核" name="third">
          <el-table :data="choseList" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="180">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="180">
            </el-table-column>
            <el-table-column prop="catalog" label="目录"> </el-table-column>
            <el-table-column label="题型">
              <template slot-scope="scope">
                <div v-if="scope.row.questionType === '1'">单选</div>
                <div v-else-if="scope.row.questionType === '2'">多选</div>
                <div v-else>简答</div>
              </template>
            </el-table-column>
            <el-table-column label="题干">
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>

            <el-table-column label="录入时间">
              <template slot-scope="scope">
                <div>{{ scope.row.addDate | relativeTime }}</div>
              </template>
            </el-table-column>
            <el-table-column label="难度">
              <template slot-scope="scope">
                <div v-if="scope.row.difficulty === '1'">简单</div>
                <div v-else-if="scope.row.difficulty === '2'">一般</div>
                <div v-else>困难</div>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人"> </el-table-column>
            <el-table-column label="审核状态">
              <template slot-scope="scope">
                <div v-if="scope.row.chkState === 0">待审核</div>
                <div v-else-if="scope.row.chkState === 1">通过</div>
                <div v-else>拒绝</div>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  @click="YUlanmClick(scope.row)"
                  type="text"
                  size="small"
                >
                  预览
                </el-button>
                <el-button
                  v-if="scope.row.chkState === 0"
                  type="text"
                  size="small"
                  @click="ShenHe(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="small" :disabled="true" v-else
                  >审核</el-button
                >
                <el-button type="text" size="small" @click="Xiugai(scope.row)"
                  >修改</el-button
                >

                <el-button
                  type="text"
                  size="small"
                  @click="Shnagjia(scope.row)"
                  v-if="scope.row.publishState === 1"
                  >上架</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="Xiajia(scope.row)"
                  v-else
                  >下架</el-button
                >
                <el-button type="text" size="small" @click="Shanchu(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table></el-tab-pane
        >
        <el-tab-pane label="已拒绝" name="fourth">
          <el-table :data="choseList" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="180">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="180">
            </el-table-column>
            <el-table-column prop="catalog" label="目录"> </el-table-column>
            <el-table-column label="题型">
              <template slot-scope="scope">
                <div v-if="scope.row.questionType === '1'">单选</div>
                <div v-else-if="scope.row.questionType === '2'">多选</div>
                <div v-else>简答</div>
              </template>
            </el-table-column>
            <el-table-column label="题干">
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>

            <el-table-column label="录入时间">
              <template slot-scope="scope">
                <div>{{ scope.row.addDate | relativeTime }}</div>
              </template>
            </el-table-column>
            <el-table-column label="难度">
              <template slot-scope="scope">
                <div v-if="scope.row.difficulty === '1'">简单</div>
                <div v-else-if="scope.row.difficulty === '2'">一般</div>
                <div v-else>困难</div>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人"> </el-table-column>
            <el-table-column label="审核状态">
              <template slot-scope="scope">
                <div v-if="scope.row.chkState === 0">待审核</div>
                <div v-else-if="scope.row.chkState === 1">通过</div>
                <div v-else>拒绝</div>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  @click="YUlanmClick(scope.row)"
                  type="text"
                  size="small"
                >
                  预览
                </el-button>
                <el-button
                  v-if="scope.row.chkState === 0"
                  type="text"
                  size="small"
                  @click="ShenHe(scope.row)"
                  >审核</el-button
                >
                <el-button type="text" size="small" :disabled="true" v-else
                  >审核</el-button
                >
                <el-button type="text" size="small" @click="Xiugai(scope.row)"
                  >修改</el-button
                >

                <el-button
                  type="text"
                  size="small"
                  @click="Shnagjia(scope.row)"
                  v-if="scope.row.publishState === 1"
                  >上架</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="Xiajia(scope.row)"
                  v-else
                  >下架</el-button
                >
                <el-button type="text" size="small" @click="Shanchu(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table></el-tab-pane
        >
      </el-tabs>
    </el-card>
    <!-- 引入的dialog组件 -->
    <basics-dialog
      :LookVisible="LookVisible"
      @lookCancel="LookVisible = $event"
      :baseLists="baseLists"
    ></basics-dialog>
  </div>
</template>

<script>
// 导入axios
import { getChoiceness } from '@/api/questions/choiceness.js'
// 引入dialog
import basicsCome from '@/views/question/layout/basicsCommp'
// import pagiNation from '@/views/question/layout/paging' // 分页
// 导入时间处理
import '@/utils/day.js'

export default {
  components: {
    // pagiNation,
    basicsCome,
    basicsDialog: () => import('@/views/question/layout/Dialog/lookDialog')
  },
  created() {
    this.getChos()
  },
  data() {
    return {
      activeName: 'first', // 控制Tab 切换
      choseList: [], // 全部精选题库数据列表
      queryinfo: {
        page: 1, // 当前页数
        pagesize: 10 // 每页多少条
      },
      total: '', // 总条数
      Isdisabled: false, // 控制按钮是否禁用
      Isaudit: '', // 切换审核状态
      // 控制 查看 Dialog 对话框 开关
      LookVisible: false,
      // 存放精选础题库详情
      baseLists: {}
    }
  },
  methods: {
    // 获取题库详情数据
    async getChos() {
      const { data: res } = await getChoiceness()
      console.log(res)
      this.choseList = res.items
      this.queryinfo.page = res.page
      this.queryinfo.pagesize = res.pagesize
      this.total = res.counts
    },
    // 通过状态发请求
    async ZhuangTai() {
      const { data: res } = await getChoiceness({ chkState: this.Isaudit })
      this.choseList = res.items
      this.queryinfo.page = res.page
      this.queryinfo.pagesize = res.pagesize
      this.total = res.counts
    },
    // Tab切换触发
    TabClick(tab) {
      console.log(tab.label)
      // 判断切换状态
      if (tab.label === '待审核') {
        this.Isaudit = 0
      } else if (tab.label === '已审核') {
        this.Isaudit = 1
      } else if (tab.label === '已拒绝') {
        this.Isaudit = 2
      } else {
        this.getChos()
      }
      this.ZhuangTai()
    },
    // 预览按钮点击
    YUlanmClick(row) {
      this.LookVisible = true
      // console.log(1)
      console.log(row)
      this.baseLists = row
    }
  },
  // 审核按钮点击
  ShenHe(row) {},
  // 修改按钮点击
  Xiugai(row) {},
  // 上架按钮点击
  Shnagjia(row) {},
  // 下架按钮点击
  Xiajia(row) {},
  //  删除按钮点击
  Shanchu(row) {}
}
</script>

<style></style>
